<template>
  <div>
    <div class="block">
      <span class="demonstration">房屋区域选择</span>
      <el-cascader
          v-model="selectoptions1"
          :options="selectoptions1"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
          @active-item-change="handleItemChange"></el-cascader>
      <el-button  type="success" @click="exportExcel()">导出</el-button>
      <el-upload
          action="http://localhost:8080/api/v1/room/importExcel"
          :show-file-list="false"
          :headers="headers"
          accept="xlsx"
          :on-success="importExcel"
          style="display:inline-block">

        <el-button type="primary" plain>导入</el-button>
      </el-upload>
    </div>


    <div style="margin-top: 10px">
      <span style="margin-left: 30px">房号：</span>
      <el-input v-model="roomVo.room.roomNum" style="width: 180px" placeholder="请输入房屋号"></el-input>

      <span style="margin-left: 30px">业主Id：</span>
      <el-input v-model="roomVo.room.landlordId" style="width: 180px" placeholder="请输入业主Id"></el-input>

      <span style="margin-left: 30px">房屋状态：</span>
      <el-select v-model="roomVo.room.status" style="width:165px" clearable placeholder="请选择房屋状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button style="margin-left: 50px" type="primary" @click="found">查找</el-button>


    </div>


    <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }" :data="data" style="width: 100% ;margin-top: 30px" :stripe="true"
              :border="true" :highlight-current-row="true">
      <el-table-column prop="id" label="房屋Id">
      </el-table-column>
      <el-table-column prop="buildingNum" label="楼栋">
      </el-table-column>
      <el-table-column prop="unit" label="单元">
      </el-table-column>
      <el-table-column prop="floor" label="楼层">
      </el-table-column>
      <el-table-column prop="roomNum" label="房屋号">
      </el-table-column>
      <el-table-column prop="peopleNum" label="住户人数">
      </el-table-column>
      <el-table-column prop="landlordId" label="业主id">
      </el-table-column>
      <el-table-column prop="status" label="状态">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary " @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>

    <div>
      <el-dialog title="楼栋" :visible.sync="dialogFormVisible">
        <el-form :model="room">

          <el-form-item label="业主" :label-width="formLabelWidth">
            <el-input v-model="room.landlordId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="人数" :label-width="formLabelWidth">
            <el-input v-model="room.peopleNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="room.status" placeholder="请选择项目状态">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="空闲" value="空闲"></el-option>
              <el-option label="出租" value="出租"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="updateRoom1()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.use(VueAxios, axios)


export default {
  data() {
    return {
      roomVo: {
        room: {
          roomNum: '',
          landlordName: '',
          status: ''
        },
        pageBean: {
          currPage: 1,
          currPageSize: 10
        }
      },
      options: [
        {value: '空闲', label: '空闲'},
        {value: '正常', label: '正常'},
        {value: '出租', label: '出租'},
      ],
      room: {
        id: 0,
        buildingNum: "",
        unit: "",
        floor: 0,
        roomNum: 0,
        peopleNum: 0,
        status: "",
        landlordId: 0,
        landlordName: "",
      },
      data: [
        {
          id: 0,
          buildingNum: "",
          unit: "",
          floor: 0,
          roomNum: 0,
          peopleNum: 0,
          status: "",
          landlordId: 0,
          landlordName: "",
        }],
      data1: [
        {
          id: 0,
          buildingNum: "",
          unit: "",
          floor: 0,
          roomNum: 0,
          peopleNum: 0,
          status: "",
          landlordId: 0,
          landlordName: "",
        }],
      visible: false,
      prev: "",
      pager: "",
      next: "",
      currentPage1: 1,
      size: 10,
      selectvalue: [],
      selectoptions1: [
        // {
        //   value: '',
        //   label: '',
        //   children: [{
        //     value: '',
        //     label: '',
        //     // children: [{
        //     //   value: '',
        //     //   label: '',
        //     // }]
        //   }]
        // }
      ]
    };
  },
  computed: {
    headers() {
      const jwt = localStorage.getItem('jwt')
      return {
        jwt: jwt
      };
    }
  },
  created() {
    this.roomVo.pageBean.currPageSize=10;
    this.roomVo.pageBean.currPage=1;
    this.axios({
      method: 'post',
      url: "room/list",
      data: this.roomVo,
    }).then((r) => {
      this.data = r.data.data.data;

      console.log("..................")
      console.log(r.data.data.data);
    })
    //this.$axios.post("/room/list?page=1&size=10").then(r => {
      // console.log('进入')
      // console.log(r.data.data.data);
      //this.data = r.data.data.data;
    //});

    this.$axios.post("/room/selectBuilding").then(r => {
      //  console.log('进入')
      //  console.log(r.data);
      //  this.selectoptions1 = r.data.data;
      for (let i = 0; i < r.data.length; i++) {
        let temp = {value: r.data[i].buildingId, label: r.data[i].buildingNum, children: []};
        this.selectoptions1.push(temp);
      }
    });
  },
  methods: {
    updateRoom1() {
      //  console.log("===========");
      // console.log(this.room);
      this.$axios.post("/room/updateRoom", this.room).then(r => {
        if (r.data.code == 200) {
          this.dialogFormVisible = false;
          this.getChargeConfigs();
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      })
    },
    deleted(index, row) {
      if (row.status == "y") {
        this.$message({
          showClose: true,
          message: '本条数据是启用状态，禁止删除',
          type: 'error'
        });
      } else {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(index, row);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    handleDelete(index, row) {
//console.log("deledtid")
      // console.log(row.id);
      this.$axios.post("/room/delteLandID?id=" + row.id).then(r => {
      })
    },
    handleEdit(index, row) {
      // console.log(row);
      this.dialogFormVisible = true;
      this.getById(row.id);

    },
    getById(id) {
      this.$axios.post("/room/listone?id=" + id).then(r => {
        if (r.data.code == 200) {
          // console.log(r);
          this.room = r.data.data;
        }
      })
    },
    exportExcel() {
      this.$axios
          .post("/room/exportExcel", this.room, {
            responseType: "blob",
          })
          .then((flow) => {
            if (!flow.data) return;
            const blob = new Blob([flow.data]);
            const blobUrl = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.download = "Room.xlsx"; // 自定义下载的文件名
            a.href = blobUrl;
            a.click();
          });

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      //this.$axios.post("/room/list?page=‘ + currentPage1 +’&size=" + val).then(r => {
        // console.log('进入')
        //console.log(r.data.data.data);
        //this.data = r.data.data.data;
     // });
      this.roomVo.pageBean.currPageSize=val;
      this.axios({
        method: 'post',
        url: "room/list",
        data: this.roomVo,
      }).then((r) => {
        this.data = r.data.data.data;
        console.log(r.data.data);
      })
    },
    handleCurrentChange(val) {
      //  console.log(`当前页: ${val}`);
      //this.$axios.post("/room/list?size=10&page=" + val).then(r => {
        // console.log('进入')
        //console.log(r.data.data.data);
        //this.data = r.data.data.data;
      //});
      this.roomVo.pageBean.currPage=val;
      this.axios({
        method: 'post',
        url: "room/list",
        data: this.roomVo,
      }).then((r) => {
        this.data = r.data.data.data;
        console.log(r.data.data);
      })




    },
    found() {
      console.log(this.roomVo.room);
      console.log("-------------");
      this.axios({
        method: 'post',
        url: "room/foundlist",
        data: this.roomVo,
      }).then((r) => {
        this.data = r.data.data;
        console.log("++++++++++++++");

        console.log(r.data.data);
      })
    },
    handleChange(value) {
      //console.log(value);
      this.roomVo.room.buildingNum = value[0];
      this.roomVo.room.unit = value[1];
      this.roomVo.room.floor = value[2];
    },
    alterTypeData(type) {
      if (type.sonType.length == 0) {
        type.sonType = undefined;
        return;
      }
      for (const p of type.sonType) {
        this.alterTypeData(p);
      }
    }
    ,
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    }
    ,
    handleItemChange(value) {
      //console.log(value.length);
      if (value.length == 2) {
        let buildingId= value[1];
        let unit = value[0];
        console.log(value[0]);
        this.$axios.post("/room/selectRoomBYAll?buildingId="+buildingId+"&unitId="+unit).then(r => {
          console.log(r.data.data);
          this.data = r.data.data;
        });
        // this.$axios.post("/room/selectRoomBYCondtion?buildingId="+value[1]+"&unitId="+value[0]).then(r=> {
        //console.log(value[1]);
        //console.log(r.data);
        // console.log(this.selectoptions1);
        // console.log('value='+value);
        //   for (let a=1;a<=this.selectoptions1.length;a++) {
        //      console.log('a='+a);
        //     console.log(this.selectoptions1[a].children)
        //     // console.log('===========')
        //     // console.log(this.selectoptions1[a].value)
        //     // console.log(value[0])
        //     if (this.selectoptions1[a].value == value[0]) {
        //       console.log('进入3')
        //       console.log(this.selectoptions1[a].children.length)
        //       for (let b=0;b<=this.selectoptions1[a].children.length;b++){
        //         console.log('b='+b);
        //         for (let c=0;c<=r.data.data.length;c++){
        //           let temp={value:r.data.data[c].floorId,label:r.data.data[c].floor,children:[]};
        //           this.selectoptions1[a].children[b].children.push(temp);
        //         }
        //
        //       }
        //     }
        //
        //   }
        //
        //
        //     for (let a=0;a<=this.selectoptions1[value[1]].length;a++){
        //       //console.log(this.selectoptions1[value[1]][a]);
        //     if (this.selectoptions1[value[1]][a].value == value[1]){
        //       console.log('进入2');
        //       console.log(this.selectoptions1[value[1]][a].value);
        //       // for (let i=0;i<r.data.data.length;i++){
        //       //   let temp={value:r.data.data[i].unitId,label:r.data.data[i].unit,children:[]};
        //       //   this.selectoptions1[a].children.push(temp);
        //       // }
        //     }
        //
        //
        //   }
        // })
      } else {
        this.$axios.post("/room/getRoomByBuildingId?buildingId=" + value).then(r => {
          console.log('进入1')
          for (let a = 0; a <= this.selectoptions1.length; a++) {
            if (this.selectoptions1[a].value == value) {
              //console.log(this.selectoptions1[a].value)
              for (let i = 0; i < r.data.data.length; i++) {
                let temp = {value: r.data.data[i].unitId, label: r.data.data[i].unit, children: []};
                this.selectoptions1[a].children.push(temp);
              }
            }
            //  this.alterTypeData(this.selectoptions1[a]);
          }
        });
      }
    },
  },
}
</script>

<style scoped>

</style>